<template>
	<view class="container">
		<view class="jilu_list">
			<view class=" xiangmu" v-for="(item,index) in dataList" :key="index">
				<view class="list_title uni-flex uni-flex-align flex-bt">
					<view class=" uni-flex uni-flex-align ">
						<image :src="item.logo" mode="aspectFit"></image>
						<view>{{item.title}}</view>
					</view>
					<view class="">
						<tui-button width="160rpx" height="60rpx" type="danger" :size="24" @click="daoChu(item)">查看活动码</tui-button>
					</view>
				</view>
				<!-- <view class="miaoshu" v-if="item.status==4">驳回原因: <text>{{item.remark}}</text></view> -->
			</view>
		</view>
		<view class="empty-box" v-if="dataList.length==0">
			<image src="/static/ic_nodata.png" mode=""></image>
			<view class="">暂无数据</view>
		</view>
		<view class="qrimg">
			<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit"
				:background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
				:onval="onval" :loadMake="loadMake" @result="qrR" />
		</view>
		<view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
				<view class="cu-dialog" style="width: 630rpx;">
					<view class="cu-bar bg-white justify-end">
						<view class="content">活动码</view>
						<view class="action">
							<text class="cuIcon-close text-red" @click="closeRule"></text>
						</view>
					</view>
					<view class="rule-content">
						<image :src="quhuoImg" mode=""
							style="width: 400rpx;height: 400rpx;margin: 0 auto;display: block;"></image>
						<view class="" style="color:#999;text-align: center;margin: 40rpx 0 20rpx;"></view>
						<!-- <view class="btns" @click="downLoad">保存到相册</view> -->
					</view>
		
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zbCode from '@/components/zb-code/zb-code.vue'
	export default {
		components: {
			zbCode,
		},
		data() {
			return {
				page:1,
				dataList:[],
				type:'',
				m_type:'',
				id:'',
				uuid:'',
				timer:null,
				quhuoImg: '',
				codeShow: false,
				cid: '1',
				ifShow: true,
				val: "", // 要生成的二维码值
				src: '', // 二维码生成后的图片地址或base64
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				background: '#FFF', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '/static/logo.jpg', // 二维码图标
				iconsize: 20, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				isRule:false
			}
		},
		onLoad(e) {
			this.id = e.inviter_code
			this.getList()
			// 使用示例
			
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			qrR(res){
				this.quhuoImg = res
				this.isRule = true
			},
			getList(){
				let that = this
				that.tui.request('api.auth.qrcode/list', "get",{page:that.page,page_size:20}, false, false, true).then((res) => {
					if(res.code==1){
						that.dataList = that.dataList.concat(res.data.list)
					}
				}).catch((res) => {})
			},
			closeRule(){
				this.isRule = false
			},
			daoChu(e){
				let that = this
				that.val =that.tui.faceUrl()+'#/pages/tuanzhang/activeInfo?refCode='+ that.id+'&group_uuid='+e.group_uuid+"&qrcode_id="+e.id
				console.log(that.val)
				setTimeout(function(){
					that.$refs.qrcode._makeCode()
				},100)
			},
			fuzhi(e){
				let that = this
				uni.setClipboardData({
					data: e,
					success: function () {
					 that.tui.toast('复制成功,请打开浏览器下载',5000)
					},
				})
			},
			lunxun(){
				let that = this
				that.tui.addrequest('live/tz/export-result', "get",{uuid:that.uuid}, false, false, false).then((res) => {
					if(res.code==0){
						clearTimeout(that.timer)
						// window.location.href = res.data.link
						// that.tui.href('/pages/tuanzhang/yulan?url='+res.data.link)
						that.fuzhi(res.data.link)
						return
						const downloadTask = uni.downloadFile({
							url: res.data.link, //仅为示例，并非真实的资源
							success: (res) => {
								if (res.statusCode === 200) {
									console.log('下载成功');
									uni.saveFile({
										tempFilePath: res.tempFilePath,
										success: function(red) {
											console.log(red)
											uni.showToast({
												icon: 'none',
												mask: true,
												title: '文件已保存：' + red.savedFilePath, //保存路径
												duration: 3000,
											});
										}
									});
								}
							}
						});
						
						downloadTask.onProgressUpdate((res) => {
							console.log('下载进度' + res.progress);
							console.log('已经下载的数据长度' + res.totalBytesWritten);
							console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
							
							// 满足测试条件，取消下载任务。
							if (res.progress > 50) {
								downloadTask.abort();
							}
						});
					}
				}).catch((res) => {})
			},
			
			convertBeijingToUTC(beijingTime) {
			    return beijingTime.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
			}
			 
			
		}
	}
</script>

<style lang="scss">
	page{background: #f7f7f7;}
	.jilu_list{padding-bottom: 10rpx;}
	.nojilu{padding-top: 30rpx;}
	.xiangmu{margin: 20rpx;padding: 30rpx;background: #fff;border-radius: 10rpx;
		.list_title{line-height: 60rpx;padding-bottom: 10rpx;
			image{width: 120rpx;height: 120rpx;margin-right: 10rpx;}
		}
		.x_title{font-weight: bold;margin-bottom: 20rpx;}
		.list{height: 60rpx;
			.right{font-weight: bold;text-align: right;
				.green{font-size: 28rpx;}
				.grey{font-weight: 400;color: #999;}
			}
		}
		.miaoshu{margin-top: 10rpx;font-size: 24rpx;
			text{color: #07c160;;}
		}
	}
	.rule-win {
		.rule-content {
			background: #fff;
			padding: 20rpx 4%;
			text-align: left;
	
			text {
				font-size: 26rpx;
				color: #555555;
				text-align: left;
				line-height: 50rpx;
			}
		}
	
		.btns {
			width: 280rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			text-align: center;
			color: #fff;
			background: $base;
			margin: 20rpx auto;
		}
	}
</style>
